<template>
  <div class="add-area">
    <div>数据展示</div>
    <el-button
      type="primary"
      v-permission="'addMenu'"
      @click="router.push('/ums/addMenu')"
      >添加</el-button
    >
  </div>
  <el-table
    :data="list"
    border
    style="width: 100%"
    cell-class-name="align-c"
    table-layout="auto"
  >
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="title" label="菜单名称" />
    <el-table-column prop="level" label="菜单级数">
      <template #default="{ row }">
        <span>{{ row.level === 0 ? "一级" : "二级" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="前端名称" />
    <el-table-column prop="icon" label="前端图标">
      <template #default="{ row }">
        <span class="iconfont" :class="row.icon"></span>
      </template>
    </el-table-column>
    <el-table-column prop="hiiden" label="是否显示">
      <template #default="{ row }">
        <el-switch
          v-model="row.hidden"
          :active-value="0"
          :inactive-value="1"
          @change="switchStatus(row)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" />
    <el-table-column prop="sort" label="设置">
      <template #default="{ row }">
        <el-button
          text
          :disabled="row.level !== 0"
          type="primary"
          @click="lookLower(row.id)"
          >查看下级</el-button
        >
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="操作">
      <template #default="{ row }" v-permission="'editMenu'">
        <el-button
          text
          type="primary"
          @click="router.push(`/ums/addMenu?id=${row.id}`)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <div class="page">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChangeHandle"
        @current-change="pageChangeHandle"
      />
    </div>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { menuListbyParentIdApi, menuUpdateHiddenApi } from "./api";
import useTable from "@/hooks/useTable";
import { ElConfigProvider, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

const showDialog = ref(false);

const form = reactive({
  parentId: 0,
});

// 切换显示隐藏
const switchStatus = (row: IMenuModel) => {
  menuUpdateHiddenApi(row.id, row.hidden)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("修改成功");
      } else {
        // 万一修改失败呢？
        // 产品思维 -- 熟练工的要求
        // 也就是要求大家要有 在真实产品中 把多方面的情况都考虑到的能力
        row.hidden = row.hidden === 0 ? 1 : 0;
        // 开发者思维 -- 根据开发者的角度来想问题
      }
    })
    .catch(() => {
      row.hidden = row.hidden === 0 ? 1 : 0;
    });
};

// 查看下级
const lookLower = (id: number) => {
  router.push(`/ums/menu?pid=${id}`);
  form.parentId = id;
  fetch();
};

// 编辑
const editmenu = () => {
  router.push("/");
};

// 监听url参数，如果没有携带pid就是返回菜单列表，重置parentId
watch(
  () => route.query.pid,
  () => {
    // console.log(123);
    if (!route.query.pid) {
      form.parentId = 0;
      //   console.log(321);
    }
    fetch();
  }
);


const {
  list,
  pageNum,
  pageSize,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  fetch,
} = useTable(menuListbyParentIdApi, form);
</script>
<style lang="less" scoped>
.add-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px 2px #ccc;
  //   border-radius: 10px;
}
:deep(.align-c) {
  .cell {
    text-align: center !important;
  }
}
.page {
  display: flex;
  justify-content: right;
  padding-top: 20px;
}
</style>
